<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/2/27
  Time: 15:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>持明法洲后台管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript"></script>
    <style>
        .layui-tab-content {
            padding: 0;/*layui-tab-content:默认有padding: 10px;的值，因为iframe的绝对定位脱离文档流，所以会存在20px的空白空间*/
        }
        .show-frame {
            top: 50px!important;
            /*默认.layui-layout-admin .layui-body {
                top: 60px;
                bottom: 44px;
            }*/
            overflow: hidden;/*消除浏览器最右边的滚动条*/
        }
        .frame {
            position: absolute;
            padding: 10px;/*与layui-footer隔开一段距离*/
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" id="menu"  lay-filter="test">
                <%--<li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">列表一</a></dd>
                        <dd><a href="javascript:;">列表二</a></dd>
                        <dd><a href="javascript:;">列表三</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>--%>
            </ul>
        </div>
    </div>

    <div class="layui-body show-frame"><!--这个class属性中追加的show-frame值  是页面引入的style样式-->
        <!-- 内容主体区域  从layui文档的内置模块的常用元素操作中去找对应的HTML内容（即div布局）
            其中下面HTML中外层的div（<div class="layui-tab" lay-filter="demo">）中的lay-filter属性值是要用到的
            添加组件的方法：element.tabAdd(filter,{})
                            第一个参数：就是上面这个lay-filter的值
                            第二个参数是个对象{}：需要动态获取 根据点击的导航不同 显示的内容不同
                                                    这个就需要JS中this关键词的使用，以及attr（‘属性’）方法
                                                    获取当前标签对象内某个属性的值   这里用attr而不用prop的原因
                                                    是：prop只能获取当前标签中自带的属性的值，不能获取自定义属性的值
                            注意：下面的<div class="layui-tab" lay-allowClose="true" lay-filter="demo">标签中的：
                            lay-allowClose="true" 代表选中的这个tab组件是允许被关闭的
                            ul标签内的每一个li标签是和下面<div class="layui-tab-content">标签内的每一个div对应的
                            【一般第一个li标签和其对应的div保留着，将其余的删除掉，在后面的jQuery代码中动态获取要打开
                            的tab组件内容】
        -->
        <div class="layui-tab" lay-allowClose="true" lay-filter="myTab">
            <ul class="layui-tab-title">
                <li class="layui-this">首页</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">欢迎使用..xxxx</div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script>

    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        var $ = layui.$;
        //1、动态加载左侧导航栏
        $.ajax({
            url:'menu/select',
            success:function (result) {
            /*外层循环{
            * <li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">
            *     此处拼接一级菜单名称+</a>
            *         内层循环{
                        <dl class="layui-nav-child"><dd><a href="javascript:;">
                        此处拼接二级菜单名称
                        </a></dd></dl>
                        }
               </li>
             }
            * */
                var html = '';
                $.each(result,function (i,menu1) {//首先遍历返回的result 即是一级菜单
                    //一级菜单前缀
                    html += '<li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">';
                    html += menu1.menuName+'</a>';
                    $.each(menu1.chilren,function (j,menu2) {//再遍历二级菜单
                        var id = menu2.menuId;
                        var title = menu2.menuName;
                        var url = menu2.menuUrl;
                        //二级菜单前缀   并拼接上四个属性  用于给其绑定上点击事件 并打开对应的选项卡
                        html += '<dl class="layui-nav-child"><dd><a href="javascript:;" id="'+id+'" title="'+title+'" url="'+url+'" class="menu">';
                        // html += '<dl class="layui-nav-child"><dd><a href="javascript:;" onclick=addTab('+menu2.menuName+','+menu2.menuId+','+menu2.menuUrl+')>'
                        // html += "<dl class=\"layui-nav-child\"><dd><a href=\"javascript:;\" onclick='addTab(\"" +menu2.menuName+"\",\""+menu2.menuUrl+"\","+menu2.menuId+ ")'>";
                        html += menu2.menuName;
                        html += '</a></dd></dl>';//二级菜单后缀

                    })
                    html += '</li>';//一级菜单后缀

                })
                //最后将整个动态拼接好的HTML内容放到  id="menu"标签内
                $('#menu').html(html);
            }
        })
        //2、点击二级菜单（用类选择器 后的选择器  id=menu  和其后代的class=menu）  打开对应的选项卡
        /*function addTab(menuName,menuUrl,menuId){
            console.log(111111)
            //判断当前点击的选项卡是否已经被打开
            if($('li[lay-id='+menuId+']').length==0){
                element.tabAdd('myTab',{//若没打开  则打开新的选项卡内容
                    title:menuName,
                    contain:'<iframe class="frame" scrolling="no" frameborder="0" src="'+menuUrl+'"></iframe>',
                    id:menuId
                })
            }
            //设置打开该tab组件时自动切换到该tab组件对应的内容
            element.tabChange('demo',menuId);
        }*/
        $('#menu').on('click',$('.menu'),function () {//用事件委托绑定点击事件
            console.log($(this))//这个this是其父标签$('#menu')的doucument对象
            //第一、用JS中的this关键字和attr方法获取  所点击的那一行标签中的属性的内容
            var id = $(this).attr('id');
            var title = $(this).attr('title');
            var url = $(this).attr('url');
            console.log('id='+id)
            //第二、判断当前点击的选项卡是否已经被打开
            if($('li[lay-id='+id+']').length==0){
                element.tabAdd('myTab',{//若没打开  则打开新的选项卡内容
                    title:title,
                    contain:'<iframe class="frame" scrolling="no" frameborder="0" src="'+url+'"></iframe>',
                    id:id
                })
            }
            //第三、设置打开该tab组件时自动切换到该tab组件对应的内容
            // 注1:这个一定要写在if判断外面  要不然在该tab打开的时候就不起作用了
            /*注2：这个方法的参数1：也是指右侧主题内容的最外层div中lay-filter属性值
                                    即<div class="layui-tab" lay-filter="demo">
                            参数2：选中的当前tab组件中的lay-id属性值
             */
            element.tabChange('myTab',id);
        })
    });
</script>
</body>
</html>
